<script setup>
import featuresShow from "@/views/populationInformation/components/featuresShow.vue";
import foreignShow from "@/views/populationInformation/components/foreignShow.vue";
import MapShow from "@/views/populationInformation/components/MapShow.vue";
import specialShow from "@/views/populationInformation/components/specialShow.vue";
import systemShow from "@/views/populationInformation/components/systemShow.vue";
import townshipShow from "@/views/populationInformation/components/townshipShow.vue";
import GridCondition from "@/views/populationInformation/components/GridCondition.vue";
import Distribution from "@/views/populationInformation/components/distribution.vue";
import Special from "@/views/populationInformation/components/special.vue";
</script>

<template>
  <div class="mainContent">
    <div class="part1">
      <div class="situaItem">
        <div class="situaNode" style="flex: 3"><specialShow /></div>
        <div class="situaNode" style="flex: 5"><GridCondition /></div>
      </div>
      <div class="situaItem">
        <div class="situaNode" style="flex: 11"><MapShow /></div>
        <div class="situaNode" style="flex: 5;"><featuresShow /></div>
      </div>
      <div class="situaItem">
        <div class="situaNode" style="flex: 3"><distribution /></div>
        <div class="situaNode" style="flex: 5"><special /></div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.mainContent {
  display: flex;
  margin-left: 15px;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  .part1 {
    display: flex;
    flex: 2;
    flex-direction: row;

    .situaItem {
      display: flex;
      flex-direction: column;

      .situaNode {
        margin:0.8vh 1vh;
      }
    }
  }
  .part2 {
    display: flex;
    flex-direction: row;
    flex: 1;
    .situaNode {
      flex: 1;
      margin: 0.8vh;
    }
  }
}
</style>
